/* Description:列表查询条件区域组件 */
<template>
  <div class="search-panel">
    <div :class="[searchFlexBox ? 'search-panel-wrapper-none' : 'search-panel-wrapper']">
      <div v-if="title" class="search-panel-header">
        <div class="search-panel-icon" />
        <div class="search-panel-title">{{ title }}</div>
      </div>
      <div class="search-panel-body">
        <slot />
      </div>
    </div>
    <div v-if="showFold" class="search-fold" @click="doFold">
      <span class="text">{{ !isFold ? "展开" : "收起" }}</span><span :class="[!isFold ? 'icon-down' : 'icon-up']" />
    </div>
  </div>
</template>
<script>
export default {
	name: 'SearchPanel',
	props: {
		title: {
			type: String,
			default: '查询条件'
		},
		showFold: {
			type: Boolean,
			default: false
		},
		searchFlexBox: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			isFold: false // true 展开; false 收起
		}
	},
	methods: {
		doFold() {
			this.isFold = !this.isFold
            const parent = this.$parent.$refs
            if (Object.keys(parent).length === 0) {
                this.$emit('setHeight', this.isFold)
                return
            }
			const height = (parent.queryForm.$children.length / 3).toFixed() - 0
			parent.queryFormBox.style.height = this.isFold ? `${height * 24 }px` : '64px'
		}
	}
}
</script>
<style lang="scss" scoped>
.search-panel {
	position: relative;
	min-height: 1px;
	font-size: 12px;
	height: auto;
	outline: none;

	.search-panel-wrapper-none {
		border: none;
		overflow: hidden;
		position: relative;
		border-radius: 3px;
		flex: 1;
		.search-panel-header {
			height: 45px;
			background: #fff;
			border-bottom: none;
			color: #201f35;
			display: flex;
			flex-direction: row;
			padding: 13px 10px 15px;
		}
		.search-panel-icon {
			width: 6px;
			height: 15px;
			border-radius: 12px;
			background: #eb4b4b;
			margin-left: 6px;
			margin-right: 10px;
		}
		.search-panel-title {
			height: 100%;
			line-height: 15px;
			font-size: 14px;
            font-weight: 550;
		}
		.search-panel-body {
            height: auto;
			// display: flex;
			padding-bottom: 6px;
			padding-left: 10px;
			padding-right: 10px;
		}
	}
	.search-panel-wrapper {
		border: 1px solid #e5e5e5;
		overflow: hidden;
		position: relative;
		border-radius: 3px;
		flex: 1;
		.search-panel-header {
			height: 45px;
			background: #fff;
			border-bottom: none;
			color: #201f35;
			display: flex;
			flex-direction: row;
			padding: 13px 10px 15px;
		}
		.search-panel-icon {
			width: 6px;
			height: 15px;
			border-radius: 12px;
			background: #eb4b4b;
			margin-left: 6px;
			margin-right: 10px;
		}
		.search-panel-title {
			height: 100%;
			line-height: 15px;
			font-size: 14px;
            font-weight: 550;
		}
		.search-panel-body {
            height: auto;
			// display: flex;
			padding-bottom: 6px;
			padding-left: 10px;
			padding-right: 10px;
		}
	}
	.search-fold {
		background: #f5f5f5;
		border: 1px solid #e5e5e5;
		font-size: 12px;
		width: 20px;
		height: 59px;
		position: absolute;
		top: 33px;
		right: -21px;
		color: #424242;
		text-align: center;
		cursor: pointer;
		.text {
			display: inline-block;
			padding-top: 10px;
		}
		.icon-down {
			margin-top: 8px;
			display: inline-block;
			width: 0px;
			height: 0px;
			border: 5px solid;
			border-color: #bfbfbf transparent transparent transparent;
		}
		.icon-up {
			margin-top: 3px;
			display: inline-block;
			width: 0px;
			height: 0px;
			border: 5px solid;
			border-color: transparent transparent #bfbfbf transparent;
		}
	}
}
.search-flex-box {
    display: flex;
    justify-content: space-between;
}
.search-panel-btn {
  width:115px;
  margin: 5px 5px 5px 0;
}
.pms-queryShow {
  height: 64px;
  transition: all 0.3s ease-in-out
}
// 查询条件宽度
.pms-input,
::v-deep .pms-select {
    width: 60%;
}

// 查询条件按钮
.search-btn {
    margin-left: 20px;
    margin-top: 3px;
}

.el-dialog__headerbtn .el-dialog__close {
    display: none;
}

// 自定义列固定宽度
.el-checkbox {
    width: 115px;
}

/* 项目导出按钮 样式开始 */

// 按钮
:deep(.el-menu--horizontal > .el-submenu .el-submenu__title) {
    height: 20px;
    line-height: 14px;
    color: #eb4b4b;
    background-color: #fff;
    border: 1px solid #eb4b4b !important;
    border-radius: 3px;
    font-size: 12px;
    margin: 0 10px;
    padding: 0 10px;

    // 小箭头
    i {
        color: #eb4b4b;
        background-color: #fff;
        margin-top: 3px;
    }

    span {
        vertical-align: sub;
    }
}

// 下拉列表
.el-menu--horizontal .el-menu .el-menu-item,
.el-menu--horizontal .el-menu .el-submenu__title {
    height: 30px !important;
    line-height: 30px !important;
    font-size: 12px;
    color: black !important;
    background-color: white !important;
}

// 下拉列表
.pms-el-menu-popup.el-menu--horizontal .el-menu .el-menu-item,
.pms-el-menu-popup.el-menu--horizontal .el-menu .el-submenu__title {
    border-bottom: none;
    padding: 0 20px;
}

// 下拉列表移入
.el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
.el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
    color: #eb4b4b !important;
    background-color: #e5e5e5 !important;
}

/* 项目导出按钮 样式结束 */

/* 自定义列 样式开始 */

.box-wrap {
    padding: 0 10px;
    //overflow: hidden;
    display: flex;
    font-size: 12px;

    .box {
        // width: 35px;
        // height: 14px;
        text-align: center;
        position: relative;
        border: 1px solid #e5e5e5;
        margin: 0 12px;
        padding: 4px 10px;
        border-radius: 4px;

        &-close {
            position: absolute;
            cursor: pointer;
            font-size: 14px;
            top: -6px;
            right: -10px;
        }
    }
}

/* 自定义列 样式结束 */
</style>
